<template>
    <ul class="catagtory">
        <!-- <li :class='{ select: $store.state.catagtory.currentCatagory === item.id }' 
        v-for="item in $store.state.catagtory.catagory" 
        :key="item.id"
        >{{item.name}}</li> -->
        <li 
        @click="changeCurrent(item.id)"
        :class="{ select: currentCatagtory === item.id }" 
        v-for="item in catagtory" 
        :key="item.id">{{ item.name }}</li>
    </ul>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    computed: {
        ...mapGetters(['catagtory', 'currentCatagtory'])
    },
    // 初始化catagtory时调用action
    created() {
        this.$store.dispatch('catagtory/getCatagtory');
    },
    methods: {
        changeCurrent(id) { 
            // 点击时改变当前状态
            this.$store.commit('catagtory/updataCurrentCatagtory', id);
        }
    }
}
</script>

<style>

</style>